import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import './register.scss';
// import './reg'

class Com extends Component {
  constructor (props) {
    super(props);
    this.state = {
      pass: "",
      tel: "",
      code: "",
      flag0: false,
      flag1: false,
      flag2: false
    }
  }
  // 发送验证码
  btn () {
    let tel = this.refs.username.value
    fetch('https://sun.daxunxun.com/api/users/sendCode', {
      tel: 'tel'
    })
    .then(res => res.json())
    .then(data => {
      console.log(data, tel)
      let num = data.message
      console.log(num)
      if (data.code === 1){
        alert("发送成功")
        this.setState({
          code: data.message,
          flag0: true
        })
      } else {
        alert("发送失败")
        this.setState({
          flag0: false
        })
      }
    })
    .catch(err=> {
      console.log(err, 1)
    })
  }
  // 失去焦点，验证手机号码
  change () {
    let user = this.refs.username.value
    if (/^1(3|4|5|7|8)\d{9}$/.test(user)) {
      this.setState({
        tel: "手机号码格式正确",
        flag1: true
      })
    } else {
      this.setState({
        tel: "手机号码格式有误",
        flag1: true
      })
    }
  }
  // 失去焦点  验证密码格式
  changepass () {
    let pw = this.refs.password.value
    if (/^[0-9A-Za-z]{6,}$/.test(pw)) {
      this.setState({
        pass: "密码格式正确",
        flag2: true
      })
    } else {
      this.setState({
        pass: "密码格式有误",
        flag2: false
      })
    }
  }
  // 点击注册
  register () {
    console.log(this.state.flag0,this.state.flag1,this.state.flag2)
    if (this.state.flag0 && this.state.flag1 && this.state.flag2) {
      let getcode = this.refs.getcode.value
      let num = this.state.code
      if (num === getcode) {
        console.log(222)
        let formData = {
          username: this.refs.username.value,
          password: this.refs.password.value,
          names: this.refs.names.value
        }
        fetch('https://sun.daxunxun.com/api/users/register',{
          method: "POST", 
          headers: { 
            "Content-Type": "application/json"
            }, 
            body: JSON.stringify(formData)
        })
        .then(res => res.json())
        .then(data =>{
          console.log(data)
          console.log(this.props)
          if (data.code === 1) {
  
            alert("注册成功")
            this.props.history.push('/login')
          } else {
            alert("用户已存在，请重新注册")
            this.props.history.go()
          }
        })
      } else {
        alert("验证码错误，请重试")
        // this.props.history.go()
      }
    } else {
      alert("请按照规定完成注册")
    }
  } 


  render () {
    return (
      <div className = "container">
        <div className = "reg-header">
          <nav className = "reg-headerNav">
            <Link to ="/" ><div className="logo"></div></Link>
            <div className="reg-user">
                已经有账号?
                <Link to="/login">登录</Link>
            </div>
          </nav>
        </div>
        <div className = "reg-container">
          <div className = "regID">注册一个新的账号</div>
          <form action="" className = "reg-layout">
            <div className= "reg-num">手机号</div>
            <div className="reg-new">
              <div className="reg-tel">
                <select className="reg-country">
                  <option value="86" >中国大陆 +86 </option>
                  <option value="886" >中国台湾 +886 </option>
                  <option value="852" >中国香港 +852 </option>
                  <option value="853" >中国澳门 +853 </option>
                  <option value="1" >美国 +1 </option>
                  <option value="44" >英国 +44 </option>
                  <option value="1" >加拿大 +1 </option>
                  <option value="61" >澳大利亚 +61 </option>
                  <option value="82" >韩国 +82 </option>
                  <option value="81" >日本 +81 </option>
                  <option value="62" >印尼 +62 </option>
                  <option value="66" >泰国 +66 </option>
                  <option value="60" >马来西亚 +60 </option>
                  <option value="65" >新加坡 +65 </option>
                  <option value="33" >法国 +33 </option>
                  <option value="49" >德国 +49 </option>
                  <option value="39" >意大利 +39 </option>
                  <option value="41" >瑞士 +41 </option>
                  <option value="31" >荷兰 +31 </option>
                  <option value="45" >丹麦 +45 </option>
                  <option value="51" >秘鲁 +51 </option>
                  <option value="84" >越南 +84 </option>
                  <option value="63" >菲律宾 +63 </option>
                  <option value="95" >缅甸 +95 </option>
                  <option value="7" >俄罗斯 +7 </option>
                  <option value="855" >柬埔寨 +855 </option>
                  <option value="91" >印度 +91 </option>
                  <option value="856" >老挝 +856 </option>
                  <option value="55" >巴西 +55 </option>
                  <option value="64" >新西兰 +64 </option>
                  <option value="54" >阿根廷 +54 </option>
                  <option value="34" >西班牙 +34 </option>
                  <option value="46" >瑞典 +46 </option>
                  <option value="351" >葡萄牙 +351 </option>
                  <option value="32" >比利时 +32 </option>
                  <option value="57" >哥伦比亚 +57 </option>
                  <option value="353" >爱尔兰 +353 </option>
                  <option value="43" >奥地利 +43 </option>
                  <option value="971" >阿拉伯联合酋长国 +971 </option>
                  <option value="52" >墨西哥 +52 </option>
                  <option value="94" >斯里兰卡 +94 </option>
                  <option value="48" >波兰 +48 </option>
                  <option value="358" >芬兰 +358 </option>
                  <option value="56" >智利 +56 </option>
                  <option value="47" >挪威 +47 </option>
                  <option value="263" >津巴布韦 +263 </option>
                  <option value="36" >匈牙利 +36 </option>
                  <option value="996" >吉尔吉斯斯坦 +996 </option>
                  <option value="352" >卢森堡 +352 </option>
                  <option value="264" >纳米比亚 +264 </option>
                  <option value="27" >南非 +27 </option>
                </select>
                <span className="iconfont icon-&#xe6aa;"></span>
              </div> 
              <div className="reg-telnum">
                <input className="reg-telnum-tel" type="text" name="username" ref="username" onBlur={ this.change.bind(this) } placeholder="手机号" /> <span>{ this.state.tel }</span>
              </div>
            </div>
            <div className="reg-pass">
              昵称
              <input className="reg-password" type="text" name="names" ref="names" placeholder="设置您的用户名"/>
            </div>
            <div className="reg-pass">
              密码
              <input className="reg-password" type="password" name="password" ref="password" onBlur={ this.changepass.bind(this) } placeholder="设置下厨房密码（不少于6位）"/><span>{ this.state.pass }</span>
            </div>
             
              <div className="reg-verify">
                短信验证码
              </div>
                  <div className="reg-verify-code" onClick={ this.btn.bind(this) }>获取短信验证码</div>
              <div className="reg-verify-text">
                <input className="reg-verifyText" type="text" ref="getcode" name="code" placeholder="请输入验证码" />
                <input className="reg-button" type="button" value="注册" onClick={ this.register.bind(this) }/>
              </div>
              <div className="reg-gray">
                注册即代表你同意
                <a href="/regagreement/" target="_blank">《下厨房注册使用协议》</a>
              </div>
          </form>
        </div>
      </div>
    )
  }
}

export default Com;
